<template>
	<view class="flow_wrap">
		<view class="flow_item" 
		v-for="(item,index) in flowOptions.flowList" :key="index"
		:style="[{'background-color':(bgcolor == undefined || bgcolor == '') ? '#868686' : bgcolor,
		'color':(textcolor == undefined || textcolor == '' ? '#ffffff' : textcolor),
		'margin':(flowOptions.flowItemMargin == undefined || flowOptions.flowItemMargin == '') ? '5px' : flowOptions.flowItemMargin + 'px',
		'border-radius':(flowOptions.flowItemRadius == undefined || flowOptions.flowItemRadius == '') ? '0px' : flowOptions.flowItemRadius + 'px',
		'font-size':(flowOptions.flowItemTextSize == undefined || flowOptions.flowItemTextSize == '') ? '13px' : flowOptions.flowItemTextSize + 'px'
		}]"
		@tap.stop="flowItemClick(index,item)"
		>
			# {{(flowOptions.flowItemValue == '' || flowOptions.flowItemValue == undefined)? item :item[flowOptions.flowItemValue] }}
		</view>
	</view>
</template>

<script>
	/*
	
	*/
	export default{
		props:{
			flowOptions:{
				type:Object,
				default:function(){
					return {
						flowList:[],
						flowItemValue:'',
						flowItemBgColor: '',
						flowItemTextColor:'',
						flowItemTextSize:'',
						flowItemMargin:'',
						flowItemRadius:''
					}
				}
			},
			bgcolor:{
				type: [Number, String],
				default:'#868686'
			},
			textcolor:{
				type: [Number, String],
				default:'#868686'
			}
		},
		data(){
			return {
				// bgcolor:this.bgcolor
			}
		},
		methods:{
			flowItemClick(index,item){
				this.$emit('flowItemClickBack',{clickIndex:index,tags:item})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flow_wrap{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 3px 1px;
		overflow: visible;
		
		.flow_item{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 4px 8px;
		}
	}
</style>
